<script>
import {
  getCitysByProIdApi,
  getDistrictsByCityIdApi,
  getProvinceListApi
} from "../../../api/common/location";

export default {
  props: {
    province: {
      type: String,
      default: ''
    },
    city: {
      type: String,
      default: ''
    },
    area: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      // 省市区数据，你需要提前准备好这些数据
      provinces: [], // 省数据
      cities: [],    // 市数据
      areas: [],     // 区数据
      // selectedAddress: ['请选择省', '请选择市', '请选择区'], // 默认选中项
      visible: false,
    };
  },
  computed: {
    pickerData() {
      return [this.provinces, this.cities, this.areas];
    },
    selectedAddress: {
      get() {
        return [this.$props.province || '请选择省', this.$props.city || '请选择市', this.$props.area || '请选择区'];
      },
      set(val) {
        this.$emit('update:province', val[0]);
        this.$emit('update:city', val[1]);
        this.$emit('update:area', val[2]);
      }
    }
  },
  mounted() {
    this.selectedAddress = [this.$props.province, this.$props.city, this.$props.area];
  },
  created() {
    this.initPickerData();
  },
  methods: {
    initPickerData() {
      this.getProvinceList();
    },
    async getProvinceList() {
      const { data } = await getProvinceListApi();
      this.provinces = data;
      await this.getCitiesByProvince(this.provinces[0]);
      await this.getAreasByCity(this.provinces[0], this.cities[0]);
    },
    async onAddressChange(event) {
      // 地址选择改变时触发的处理函数
      const {
        columnIndex,
        index,
        value,
        // 微信小程序无法将picker实例传出来，只能通过ref操作
        picker = this.$refs.uPicker
      } = event;
      if (columnIndex === 0) {
        // 当省改变时，更新市和区的数据
        await this.getCitiesByProvince(value[0]);
      } else if (columnIndex === 1) {
        // 当市改变时，更新区的数据
         await this.getAreasByCity(value[1]);
      }
      // // 更新选中的地址显示
      // this.selectedAddress = value.map(item => item.name);
    },
    // 根据省获取市数据，你需要实现这个方法，可以从你的数据源获取数据
    async getCitiesByProvince(province) {
      // this.cities = [];
      // this.areas = [];
      // 实现获取市数据的逻辑，返回一个市数组
      const { data } = await getCitysByProIdApi(province.id)
      this.cities = data;
      await this.getAreasByCity(this.cities[0])
    },
    // 根据省和市获取区数据，你需要实现这个方法，可以从你的数据源获取数据
    async getAreasByCity(city) {
      // this.areas = [];
      // 实现获取区数据的逻辑，返回一个区数组
      const { data } = await getDistrictsByCityIdApi(city.id)
      this.areas = data;
    },
    confirm(arr) {
      // 点击确定按钮时触发的处理函数
      this.visible = false;
      this.selectedAddress = arr.value.map(item => item.name);
      this.$emit('confirm', arr);
    },
    colse() {
      // 点击取消按钮时触发的处理函数
      this.visible = false;
      this.$emit('cancel');
    },
  },
};
</script>

<template>
  <view class="address-picker">
    <u-picker
        ref="uPicker"
        :columns="pickerData"
        :show="visible"
        modelValue="selectedAddress"
        @change="onAddressChange"
        keyName="name"
        @confirm="confirm"
        @cancel="colse"
    ></u-picker>
    <view class="selected-address" @click="visible = true">
      {{selectedAddress.join('-')}}
    </view>
  </view>
</template>

<style scoped lang="scss">

.address-picker {
  /* 添加一些布局和样式 */
}
.selected-address {
  /* 添加选中地址的样式 */
  font-size: 15px;
}
</style>
